/**
 * Created by 小敏哥 on 2017/9/11.
 */
import React, {Component} from 'react';
import AlipayJSOperation from '../../utils/alipayJSOperation';
import PageBar from '../../components/common/pageBar';
import style from './index.scss';
import SendCxytjMessage from '../../utils/sendCxytjMessage';

class ChargeInstructions extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        //隐藏标题栏右键
        AlipayJSOperation.setRightButtonStatus(false);
        //设置标题
        AlipayJSOperation.setTitle('服务费用说明');
        document.querySelector("title").innerHTML = "服务费用说明";
        //发送埋点
        SendCxytjMessage.sendMessage({
            eventId: 'H5_P_Orderpage_Entercostpage',
            attr1: '进入检测费用详情页' //属性1
        });
    }

    render() {
        return <div className={style.container}>
            <PageBar title="服务费用说明"/>
            <div className={style.message}>
                <p>
                    1. 平台收取的订单费用仅包含服务费，验车费由工作人员验车后根据发票收取；
                </p>
                <p>
                    2. 以下为各地区办理过线检检测费用的参考价，具体费用以实际检测后开具的发票为准；
                </p>
            </div>
            <div className={style.priceContainer}>
                <div className={style.price}>
                    <div>
                        <div>办理城市</div>
                        <div>检测费（元）</div>
                    </div>
                    <div>
                        <div>北京</div>
                        <div>300</div>
                    </div>
                    <div>
                        <div>上海</div>
                        <div>300</div>
                    </div>
                    <div>
                        <div>广州</div>
                        <div>195</div>
                    </div>
                    <div>
                        <div>深圳</div>
                        <div>200</div>
                    </div>
                    <div>
                        <div>成都</div>
                        <div>150</div>
                    </div>
                    <div>
                        <div>东莞</div>
                        <div>210</div>
                    </div>
                    <div>
                        <div>惠州</div>
                        <div>208</div>
                    </div>
                    <div>
                        <div>佛山</div>
                        <div>200</div>
                    </div>
                    <div>
                        <div>湛江</div>
                        <div>190</div>
                    </div>
                    <div>
                        <div>长春</div>
                        <div>160</div>
                    </div>
                    <div>
                        <div>唐山</div>
                        <div>260</div>
                    </div>
                    <div>
                        <div>武汉</div>
                        <div>210</div>
                    </div>
                    <div>
                        <div>呼和浩特</div>
                        <div>200</div>
                    </div>
                </div>
            </div>
        </div>
    }
}

export default ChargeInstructions;
